<template>
  <view class="personPage">
    <div class="topMark">
      <img :src="info.avatar" alt="">
      <text class="name">{{info.nickname}}</text>
      <uni-fav :checked="isfllow" star="false" :content-text="contentText" @click="favClick()" />
    </div>
    <view class="jieshao">
      {{info.info}}
    </view>
    <view class="list">
      <view class="list_item" v-for="(item,index) in newsList" :key="index" @click="gotoWebView(item.content)">
        <view class="left">
          <view class="title">
            {{item.title}}
          </view>
          <view class="time">
            {{item.create_time.slice(0,10)}}
          </view>
        </view>
        <image :src="item.news_pics_set[0]"></image>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        id: '',
        likeUsers:[],
        info: {},
        btn: "关注",
        isfllow: false,
        newsList: [],
        contentText: {
          contentDefault: '关注',
          contentFav: '已关注'
        }
      };
    },
    onLoad(options) {
      this.isfllow = options.isfllow
      this.id = options.id
      this.getInfo()
      this.getUserNews()
      this.getFollows()
    },
    methods: {
      favClick() {
        this.changeFollow()
        this.isfllow = !this.isfllow
        this.$forceUpdate()
      },
      gotoWebView(url) {
        //const url = 'https://mp.weixin.qq.com/s/5-52wJCImOKPU86MBspHGg'; // 跳转的外链
        //const navtitle = '中国海洋大学新闻中心'; // 这个标题是你自己可以设置的
        wx.navigateTo({
          // 跳转到webview页面
          url: `/pages/webview/webview?url=${url}`,
        });
      },
      async changeFollow(){
        const {
          data: res
        } = await uni.$http.post('/users/' + this.id + '/operator/follow')
        if (res.code != 1000) return uni.$showMsg()
      },
      async getFollows(){
        const {
          data: res
        } = await uni.$http.get('/self/followee-ids')
        if (res.code != 1000) return uni.$showMsg()
        this.likeUsers=res.data.users
        for(var i =0;i<this.likeUsers.length;i++){
          if(this.likeUsers[i].id==this.id)this.isfllow=true
        }
      },
      async getInfo() {
        const {
          data: res
        } = await uni.$http.get('/users/' + this.id + '/info-alpha')
        if (res.code != 1000) return uni.$showMsg()
        this.info = res.data
      },
      async getUserNews() {
        const {
          data: res
        } = await uni.$http.get('/users/' + this.id + '/news-ids')
        if (res.code != 1000) return uni.$showMsg()
        this.newsList = res.data.news
      },
    }
  }
</script>

<style lang="scss">
  page {
    width: 100%;
    height: 100%;
  }

  .personPage {
    margin-top: 10px;
    width: 100%;
    height: 100%;

    .list {
      margin-top: 13px;
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      background-color: #c2c7cc;
      align-content: flex-start;
      flex-wrap: wrap;

      .list_item {
        margin-top: 24px;
        border-radius: 8px;
        width: 348px;
        height: 118px;
        display: flex;
        background-color: #fff;
        justify-content: space-around;
        align-content: center;
        padding: 0px 10px;

        image {
          width: 102px;
          height: 75px;
          margin-top: 22px;
        }

        .title {
          color: rgba(16, 16, 16, 100);
          font-size: 16px;
          margin-top: 34px;
        }

        .time {
          color: rgba(174, 174, 178, 100);
          font-size: 14px;
          margin-top: 9px;
        }
      }
    }

    .topMark {
      padding-left: 44rpx;
      padding-right: 44rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      img {
        width: 59px;
        height: 59px;
        border-radius: 50%;
      }

      .name {
        font-size: 17px;
        font-weight: 550;
        // margin-left: 40rpx;
        // margin-right: 160rpx;
      }

      button {
        width: 64px;
        height: 30px;
        background-color: #1684FC;
        color: white;
        font-size: 14px;
        line-height: 30px;
      }
    }

    .jieshao {
      margin-left: 44rpx;
      margin-top: 18px;
      width: 329px;
      height: 37px;
      color: #101010;
      font-size: 13px;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
</style>
